<template>
  <div v-if="bIsShow" class="regist-layout fixed-full item-show translucent">  <!-- translucent item-show -->
    <div class="regist-box">
      <h3 class="regist-box-title">
        <span>注册账号</span>
        <el-icon @click.stop="click2Close"><close/></el-icon>
      </h3>

      <!-- 手机号码 -->
      <div class="regist-box-tel po-input po-input-left"
        :class="bIsTelTipsErr?'regist-box-err':''"
        :data-afterContent="telTipsErr">
        <input class="po-input-inner" v-model="tel" type="text" name="tel" placeholder="手机号码"
          v-focus
          @blur="check4Tel(tel)"
          @focus="bIsTelTipsErr=false"
          @keydown.enter="click2Regist">
        <span class="po-input-label">
          <el-icon><i class="jy-icon-phone"></i></el-icon>
        </span>
      </div>

      <!-- 动态密码 -->
      <div class="regist-box-code"
        v-if="false"
        :class="bIsCodeTipsErr?'regist-box-err':''"
        :data-afterContent="codeTipsErr">
        <div class="po-input">
          <input class="po-input-inner" v-model="code" type="text" name="code" placeholder="动态密码"
            @blur="check4Code(code)"
            @focus="bIsCodeTipsErr=false">
        </div>
        <button type="button" name="getCode" @click.stop="click2GetCode">
          <span>{{strCodeTips}}</span>
        </button>
      </div>

      <!-- 静态密码 -->
      <div class="regist-box-password po-input po-input-left"
        :class="bIsPasswordTipsErr?'regist-box-err':''"
        :data-afterContent="passwordTipsErr">
        <input class="po-input-inner" v-model="password" :type="bIsPasswordShow ? 'text' : 'password'" name="password" placeholder="请输入密码(不少于6位)"
          @blur="check4Password(password)"
          @focus="bIsPasswordTipsErr=false"
          @keydown.enter="click2Regist">
        <span class="po-input-label" @click="bIsPasswordShow = !bIsPasswordShow">
          <i :class="bIsPasswordShow ? 'jy-icon-view' : 'jy-icon-preview'" style="font-size: 10px;"></i>
        </span>
      </div>

      <!-- 静态密码确认 -->
      <div class="regist-box-password2 po-input po-input-left"
        :class="bIsPassword2TipsErr?'regist-box-err':''"
        :data-afterContent="password2TipsErr">
        <input class="po-input-inner" v-model="password2" :type="bIsPassword2Show ? 'text' : 'password'" name="password2" placeholder="请再次确认密码"
          @blur="check4Password2(password2)"
          @focus="bIsPassword2TipsErr=false"
          @keydown.enter="click2Regist">
        <span class="po-input-label" @click="bIsPassword2Show = !bIsPassword2Show">
          <i :class="bIsPassword2Show ? 'jy-icon-view' : 'jy-icon-preview'" style="font-size: 10px;"></i>
        </span>
      </div>

      <div class="regist-box-email po-input po-input-left"
        :class="bIsEmailTipsErr?'regist-box-err':''"
        :data-afterContent="emailTipsErr">
        <input class="po-input-inner" v-model="email" type="text" name="email" placeholder="邮箱地址"
          @blur="check4Email(email)"
          @focus="bIsEmailTipsErr=false"
          @keydown.enter="click2Regist">
        <span class="po-input-label">
          <el-icon><message /></el-icon>
        </span>
      </div>

      <div class="regist-box-regist">
        <button type="button" name="regist" @click.stop="click2Regist">
          <span>注册</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import User from '@/api/user.js'
  export default {
    data () {
      return {
        tel: '',
        code: '',
        email: '',
        bIsTelTipsErr: false,
        bIsCodeTipsErr: false,
        bIsEmailTipsErr: false,
        telTipsErr: '',
        codeTipsErr: '',
        emailTipsErr: '',
        strCodeTips: '发送动态密码',
        canSendCode: true,
        codeCount: 0,
        codeTimeiv: null,

        password: '',
        bIsPasswordTipsErr: false,
        passwordTipsErr: '',
        bIsPasswordShow: false,
        password2: '',
        bIsPassword2TipsErr: false,
        password2TipsErr: '',
        bIsPassword2Show: false,
      }
    },
    props: ['bIsShow'],
    directives: {
      focus: {
        inserted: function(el) {
          el.focus();
        }
      }
    },
    mounted() {
      // document.querySelector('.regist-box-tel').setAttribute('data-afterContent', '验证码不正确');
      // document.querySelector('.regist-box-code').setAttribute('data-afterContent', '验证码不正确');
    },
    methods: {
      // ...mapActions('user', {
      //   getTelCode: 'getTelCode',
      // }),
      click2Regist() {
        let that = this;
        if(!that.telReg(that.tel) || !that.emailReg(that.email) || !that.passwordReg(that.password) || !that.passwordReg(that.password2)) {
          return;
        }
        else {
          if(!this.check4Password2(this.password2)) return;
        }
        let params = {
          phone: this.tel,  // 手机号码
          // vcode: this.code,  // 动态密码
          vcode: this.password,  // 静态密码
          vcode2: this.password2,  // 确认静态密码
          email: this.email,  // 邮箱
        };
        User.regist(params, res => {
          // console.log(res);

          if(0 == res.code) {
            // TODO: success
            that.bIsTelTipsErr = false;
            that.bIsCodeTipsErr = false;

            alert(res.msg);

            that.click2Close();
          }
          else if(900003 == res.code) {
            that.bIsTelTipsErr = true;
            that.telTipsErr = res.msg;
          }
          else if(1 == res.code) {
            that.bIsTelTipsErr = true;
            that.telTipsErr = res.msg;
          }
          else if(910005 == res.code) {
            that.bIsCodeTipsErr = true;
            that.codeTipsErr = res.msg;
          }
          else if(910002 == res.code) {
            that.bIsEmailTipsErr = true;
            that.emailTipsErr = res.msg;
          }
          else if(910003 == res.code) {
            that.bIsCodeTipsErr = true;
            that.codeTipsErr = res.msg;
          }
        });
      },
      click2GetCode() {
        let that = this;
        if(that.canSendCode && that.telReg(that.tel)) {  // 手机号正确&&可发送验证码短信
          // TODO: post4Code
          that.post4Code();

          // count down, codeTimeiv 需要在 beforeUnmount 的时候 clearInterval
          that.codeCount = 90;
          if(that.codeTimeiv) clearInterval(that.codeTimeiv);
          that.codeTimeiv = setInterval(function() {
            that.strCodeTips = '重新发送(' + that.codeCount + 's)';
            that.codeCount--;
            if(that.codeCount < 0) {
              that.strCodeTips = '发送动态密码';
              clearInterval(that.codeTimeiv)
            }
          }, 1000);
        }
      },
      post4Code() {
        let that = this;
        let params = {
          phone: this.tel,
        };
        User.getTelCode(params, res => {
          console.log(res);
          if(1 == res.code) {
            that.bIsTelTipsErr = true;
            that.telTipsErr = res.msg;
          }
          else if(0 == res.code) {
            // success
            that.bIsTelTipsErr = false;
          }
        });
      },
      click2Close() {
        // 注册面板关闭
        // this.bIsShow = !this.bIsShow;
        this.$emit('close', false);
      },
      check4Tel(val) {
        if(!this.telReg(val)) {
          this.bIsTelTipsErr = true;
          this.telTipsErr = '手机号码格式不正确';
        }
      },
      check4Code(val) {
        if(val) {
          this.bIsCodeTipsErr = false;
          this.codeTipsErr = '';
        }
        else {
          this.bIsCodeTipsErr = true;
          this.codeTipsErr = '验证码不正确';
        }
      },
      check4Email(val) {
        if(!this.emailReg(val)) {
          this.bIsEmailTipsErr = true;
          this.emailTipsErr = '邮箱格式不正确';
        }
      },
      check4Password(val) {
        if(val) {
          this.bIsPasswordTipsErr = false;
          this.passwordTipsErr = '';
        }
        else {
          this.bIsPasswordTipsErr = true;
          this.passwordTipsErr = '密码不正确';
        }
      },
      check4Password2(val) {
        if(val && val == this.password) {
          this.bIsPassword2TipsErr = false;
          this.password2TipsErr = '';
          return true;
        }
        else {
          this.bIsPassword2TipsErr = true;
          this.password2TipsErr = '密码不正确';
          return false;
        }
      },
      emailReg(val) {
        // TODO: 校验邮箱
        // let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        let reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
        return reg.test(val);
      },
      telReg(val) {
        // 校验手机号码
        let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        return reg.test(val);
      },
      codeReg(val) {
        return !!val;
      },
      passwordReg(val) {
        return !!val;
      },
    },
    watch: {
      // tel(newVal, oldVal) {
      //   console.log(newVal, oldVal);
      // },
      codeCount() {  // newVal, oldVal
        if(this.codeCount > 0) {
          this.canSendCode = false;
        }
        else {
          this.canSendCode = true;
        }
      },
    },
    beforeUnmount() {
      let that = this;

      // clearInterval codeTimeiv
      if(that.codeTimeiv) clearInterval(that.codeTimeiv);
    },
  }
</script>

<style lang="scss">
  @import '@/assets/css/common.scss';

  .regist-layout{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .regist-box{
    position: relative;
    box-sizing: border-box;
    width: 422px;
    height: 474px;
    background-color: #FFF;
    border: 1px solid #A5AFBE;
    border-radius: 2px;
    padding: 30px 35px;

    .regist-box-title{
      font-size: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      span{
        font-size: 30px;
        color: #43475C;
        font-weight: bold;
      }

      i{
        color: #AAAAAA;
      }
    }

    .regist-box-tel{
      margin-bottom: 18px;
      background-color: #F3F5FA;
    }
    .regist-box-err{
      color: #F8633B;
    }
    .regist-box-err::after{
      position: absolute;
      font-size: 12px;
      bottom: -15px;
      color: #F8633B;
      content: attr(data-afterContent);
    }

    .regist-box-code{
      position: relative;
      height: 46px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;

      .po-input{
        width: 180px;
        background-color: #F3F5FA;
      }

      button{
        outline: none;
        border-radius: 4px;
        border: 1px solid #A5AFBE;
        background-color: inherit;
        background-image: none;
        width: 160px;
        height: 100%;
        font-size: 14px;
        color: #A5AFBE;
      }
    }

    .regist-box-email{
      margin-bottom: 18px;
      background-color: #F3F5FA;
    }

    .regist-box-password, .regist-box-password2 {
      margin-bottom: 18px;
      background-color: #F3F5FA;
    }

    .regist-box-regist{
      position: relative;
      height: 46px;
      background: #127BFF;
      border-radius: 4px;

      button{
        outline: none;
        border-radius: 4px;
        border: none;
        background-color: inherit;
        background-image: none;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #fff;
      }
    }
  }

  .po-input{
    position: relative;
    display: flex;
    font-size: 14px;
    width: 100%;
    height: 46px;
    color: #606266;

    input.po-input-inner{
      display: inline-block;
      padding: 0 15px;
      min-width: 0;
      flex: 1;
      // width: 100%;
      // line-height: 40px;
      color: inherit;
      -webkit-appearance: none;
      outline: none;
      box-sizing: border-box;
      font-size: inherit;
      background-color: inherit;
      background-image: none;
      border-radius: 4px;
      border: none;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    span.po-input-label{
      position: absolute;
      height: 100%;
      top: 0;
      color: inherit;
      display: flex;
      align-items: center;

      i{
        font-size: 20px;
      }
    }
  }
  .po-input-left{
    input.po-input-inner{
      padding-left: 30px;
    }

    span.po-input-label{
      left: 5px;
    }
  }
  .po-input-right{
    input.po-input-inner{
      padding-right: 30px;
    }

    span.po-input-label{
      right: 5px;
    }
  }
</style>
